window.addEventListener("load", function () {
	// 主体区选项卡
	tabs($("#top-tab>div div span"), $(".article"));

	// 价格区
	let apidata = [
		{ times: 4000, price: 1200, unitPrice: "0.3000" },
		{ times: 8000, price: 2000, unitPrice: "0.2500" },
		{ times: 40000, price: 8000, unitPrice: "0.2000" },
	];
	// 价格区渲染
	apidata.forEach(function (v) {
		$("#select").innerHTML += `
		<span class="rel span">${v.times}次 <img src="../imgs/select.png" alt="" class="abs" />
		</span>`;
	});

	//
	//
	$("#select .span").forEach(function (v, i) {
		// 增加点击事件渲染下方结构;
		v.addEventListener("click", function () {
			$("#price").innerHTML = `<strong>￥${apidata[i].price}</strong>
		约（${apidata[i].unitPrice}元/次），仅限企业实名购买；`;
		});
	});
	// 默认第一个框激活
	$("#select .span")[0].classList.add("click");

	// 选择套餐区
	$("#select .span").forEach(function (v, i) {
		v.addEventListener("click", function () {
			$("#select .span").forEach(function (vv) {
				vv.classList.remove("click");
			});
			v.classList.add("click");
			$("#select>span>img").forEach(function (vvv) {
				vvv.style.display = "none";
				$("#select>span>img")[0].style.display = "inline-block";
			});
			$("#select>span>img")[i + 1].style.display = "inline-block";
		});
	});

	//配置顶部的粒子效果
	var config = {
		vx: 4, //小球x轴速度,正为右，负为左
		vy: 4, //小球y轴速度
		height: 2, //小球高宽，其实为正方形，所以不宜太大
		width: 2,
		count: 200, //点个数
		color: "C3C3C3", //点颜色
		stroke: "EDEDED", //线条颜色
		dist: 6000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 10, //点到点最大连接数
	};

	//调用
	CanvasParticle(config);
	$("canvas").style = "";
	$("canvas").className = "canvas";
});
